<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    width="calc(100% - 100px)"
    :fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    :close-delay="200"
    @close="closeDialog(false)"
  >
    <el-tabs v-model="activeTabName" @tab-click="handleTabChange">
      <el-tab-pane label="项目信息" name="base">
        <base-info v-if="activeTabName == 'base'" :id="dialogDetail.id" />
      </el-tab-pane>
      <el-tab-pane label="项目设备信息" name="device">
        <device v-if="activeTabName == 'device'" :id="dialogDetail.id"
      /></el-tab-pane>
      <el-tab-pane label="参建单位信息" name="corp">
        <corp v-if="activeTabName == 'corp'" :id="dialogDetail.id"
      /></el-tab-pane>
      <el-tab-pane label="项目进度信息" name="progress"
        ><progress-com v-if="activeTabName == 'progress'" :id="dialogDetail.id"
      /></el-tab-pane>
      <el-tab-pane label="项目专户信息" name="special-account"
        ><special-account v-if="activeTabName == 'special-account'" :id="dialogDetail.id"
      /></el-tab-pane>
      <el-tab-pane label="项目保证金信息" name="guarantee"
        ><guarantee v-if="activeTabName == 'guarantee'" :id="dialogDetail.id"
      /></el-tab-pane>
      <el-tab-pane label="项目工资信息" name="wage"
        ><wage v-if="activeTabName == 'wage'" :id="dialogDetail.id"
      /></el-tab-pane>
      <!-- <el-tab-pane label="项目管理人员" name="manager"
        ><manager v-if="activeTabName == 'manager'" :id="dialogDetail.id"
      /></el-tab-pane> -->
      <el-tab-pane label="人员列表" name="person"
        ><person v-if="activeTabName == 'person'" :id="dialogDetail.id"
      /></el-tab-pane>
      <!-- <el-tab-pane label="管理人员考勤" name="manager-checkin"
        ><manager-checkin v-if="activeTabName == 'manager-checkin'" :id="dialogDetail.id"
      /></el-tab-pane> -->
      <el-tab-pane label="考勤信息" name="person-checkin"
        ><person-checkin v-if="activeTabName == 'person-checkin'" :id="dialogDetail.id"
      /></el-tab-pane>
      <el-tab-pane label="按天统计考勤" name="day-statistic-checkin"
        ><day-statistic-checkin v-if="activeTabName == 'day-statistic-checkin'" :id="dialogDetail.id"
      /></el-tab-pane>
      <el-tab-pane label="按人统计考勤" name="person-statistic-checkin"
        ><person-statistic-checkin v-if="activeTabName == 'person-statistic-checkin'" :id="dialogDetail.id"
      /></el-tab-pane>
      <el-tab-pane label="考勤明细" name="checkin-detail"
        ><checkin-detail v-if="activeTabName == 'checkin-detail'" :id="dialogDetail.id"
      /></el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script lang="ts" setup>
import Device from "./components/Device/index.vue";
import BaseInfo from "./components/BaseInfo/index.vue";
import Corp from "./components/Corp/index.vue";
import ProgressCom from "./components/Progress/index.vue";
import SpecialAccount from "./components/SpecialAccount/index.vue";
import Guarantee from "./components/Guarantee/index.vue";
import Wage from "./components/Wage/index.vue";
import Manager from "./components/Manager/index.vue";
import Person from "./components/Person/index.vue";
import ManagerCheckin from "./components/ManagerCheckin/index.vue";
import PersonCheckin from "./components/PersonCheckin/index.vue";
import DayStatisticCheckin from "./components/DayStatisticCheckin/index.vue";
import PersonStatisticCheckin from "./components/PersonStatisticCheckin/index.vue";
import CheckinDetail from "./components/CheckinDetail/index.vue";
import { useScreen } from "@/store/modules/screen";
import type { TabsPaneContext } from "element-plus";

//声明变量
const activeTabName = ref<any>("base");
const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "新增",
      footBtn: "确认新增",
      id: 0,
    }),
  },
});
const { dialogDetail } = toRefs(props);
const emit = defineEmits(["sendClose"]);

//选项卡改变
const handleTabChange = (tab: TabsPaneContext, event: Event) => {
  activeTabName.value = tab.paneName;
};
const initForm = async function () {
  activeTabName.value = "base";
};
onMounted(async () => {
  initForm();
});

/**
 * 关闭弹窗
 */
function closeDialog(needRefresh: boolean) {
  emit("sendClose", needRefresh);
}
</script>
<style lang="scss" scoped></style>
